<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>自定义表单选择菜单</title>
<!--指定设备的宽度-->
<meta name="viewport"  content="width=device-width,  initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head> 
<body> 
<!--构建一个表单select来选择星期数-->
<div data-role="page" id="pageone">
	<div data-role="header" data-position="fixed">       
		<h1>显示更多列表框数据</h1>
	</div>
	<div data-role="content">
       <form id="form1">                           <!--构建一个表单-->
          <fieldset data-role="fieldcontain">      <!--表单内容分隔容器-->
            <label for="day">请选择星期几：</label><!--表单标题-->
            <!--通过指定data-native-menu，使得表单用一种非原生方式显示-->
            <select name="day" id="day" data-native-menu="false">
             <option value="mon">星期一</option>
             <option value="tue">星期二</option>
             <option value="wed">星期三</option>
             <option value="thu">星期四</option>
             <option value="fri">星期五</option>
             <option value="sat">星期六</option>
             <option value="sun">星期日</option>
            </select>
          </fieldset>
          <!--获取表单选择内容的按钮-->
          <input type="button" data-inline="true" id="btnsend" value="显示您的选择">
        </form>
   </div>                       
  <div data-role="footer" data-position="fixed">
		<h4>选择框示例</h4>   
	</div>   
   <script type="text/javascript">  
       //在页面初始加载时，对选择框进行初始设置 
	   $("#pageone").bind("pageinit",function(){	
	      var weekly=new Date().getDay()-1;             //获取当前星期数
		  var myselect = $("#day");                      //选中select控件
		  myselect[0].selectedIndex = weekly;            //设置选择索引
		  myselect.selectmenu('refresh');	              //刷新select控件
	       $('#btnsend').unbind('click');                //取消绑定按钮单击事件
		   //重新绑定按钮单击事件  		    
	       $("#btnsend").bind('click',function(event){	
		     //获取当前选择的文本
			alert("您当前选择了:  "+myselect.children('option:selected').text());			
		   });
	   });   
   </script>       
</div>
</body>
</html>
